/**
 * @summary: 公司管理
 */
import React from 'react';
import { Link, router } from 'umi';
import { Button, Table, Row, Col, Card } from 'antd';
import { formatMessage } from 'umi';
import moment from 'moment';
import { eventTrack } from '@/utils/track';
import logo from '@/assets/logo.png';
import AuthComponent from '@/utils/auth/AuthComponent';
import authHelper from '@/utils/auth/helper';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import QuestionButton from '@/components/QuesitonButton';
import { deleteNullChildren } from '@/utils/utils';

import { useCompany } from '../hooks';
import styles from './OrgList.less';

const { checkCode } = authHelper;

// [DELETE这个页面应该可以删除了，属于旧的组织机构]

const OrgList = () => {
    const [loading, data] = useCompany();
    const [expandedKeys, setExpandedKeys] = React.useState([]);

    const dataSource = React.useMemo(() => deleteNullChildren(data), [data]);

    React.useEffect(() => {
        if (dataSource.length > 0 && expandedKeys.length === 0) {
            setExpandedKeys([data[0].id]);
        }
    }, [dataSource]);

    const handleExpandedChange = expandedRows => {
        setExpandedKeys(expandedRows);
    };

    const handleCreate = async () => {
        // 埋点
        await eventTrack({
            eventName: 'organization_orgList_creat_click'
        });
        history.push({
            pathname: '/office/personnelManagement/organization/orgList/orgEdit'
        });
    };
    const columns = [
        {
            title: formatMessage({ id: 'columns.orgList.orgName' }),
            dataIndex: 'companyName',
            width: '30%',
            render: (text, record) => {
                if (record.parentId !== 'null') {
                    if (!checkCode('office:orgs:company:detail')) return text;
                    return (
                        <Link
                            //   埋点
                            onClick={() => {
                                eventTrack({
                                    eventName: 'organization_orgList_info_click',
                                    eventProps: { company_name: record.companyName }
                                });
                            }}
                            to={`/office/personnelManagement/organization/orgList/OrgDetail?id=${record.id}`}
                        >
                            {text}
                        </Link>
                    );
                }
                return text;
            }
        },

        {
            title: formatMessage({ id: 'columns.orgList.createTime' }),
            dataIndex: 'regTime',
            sorter: (a, b) => moment(a.regTime) - moment(b.regTime),
            width: '15%'
        },
        {
            title: formatMessage({ id: 'columns.orgList.employNum' }),
            dataIndex: 'employeeCount',
            sorter: (a, b) => a.employeeCount - b.employeeCount,
            width: '15%'
        },
        {
            title: 'CEO/区域CEO',
            dataIndex: 'companyManager',
            width: '15%'
        },
        {
            title: formatMessage({ id: 'columns.orgList.orgPhone' }),
            dataIndex: 'companyPhone',
            width: '15%'
        },
        {
            title: formatMessage({ id: 'columns.orgList.action' }),
            width: '10%',
            render: (_, record) => {
                if (record.parentId !== 'null') {
                    return (
                        <AuthComponent code="office:orgs:company:edit">
                            <Link
                                onClick={() => {
                                    // 埋点
                                    eventTrack({
                                        eventName: 'organization_orgList_edit_click',
                                        eventProps: { company_name: record.companyName }
                                    });
                                }}
                                to={{
                                    pathname: '/office/personnelManagement/organization/orgList/orgEdit',
                                    query: {
                                        id: record.id,
                                        action: 'edit'
                                    }
                                }}
                            >
                                {formatMessage({
                                    id: 'columns.orgList.action.edit'
                                })}
                            </Link>
                        </AuthComponent>
                    );
                }
                return '';
            }
        }
    ];

    return (
        <PageHeaderWrapper>
            <Card
                title="公司管理"
                bordered={false}
                extra={<QuestionButton blank to="/personal/portal/article?page=orgList" />}
            >
                <Row type="flex" justify="space-between" style={{ margin: '0 0 24px' }}>
                    <Col md={21} sm={24}>
                        <div className={styles.logoWrap}>
                            <img alt="logo" src={logo} />
                            <h1 className={styles.logoText}>微微科技集团</h1>
                        </div>
                    </Col>
                    <Col md={3} sm={24}>
                        <AuthComponent code="office:orgs:company:add">
                            <Button type="primary" onClick={handleCreate} style={{ float: 'right' }}>
                                {formatMessage({
                                    id: 'btn.orgList.createOrg'
                                })}
                            </Button>
                        </AuthComponent>
                    </Col>
                </Row>
                <Table
                    loading={loading}
                    rowKey="id"
                    dataSource={dataSource}
                    expandedRowKeys={expandedKeys}
                    onExpandedRowsChange={handleExpandedChange}
                    columns={columns}
                    scroll={{ x: 'max-content' }}
                    pagination={false}
                />
            </Card>
        </PageHeaderWrapper>
    );
};

export default OrgList;
